@font-face {
    font-family: Writing;
    src: url(fonts/Writing-Regular.otf);
}
body {
    width: 1920px;
    margin: 0;
}
.son {
    z-index: 3;
    position: absolute;
    scale: 25%;
    left: 1500px;
    top: 120px;
    filter: drop-shadow(10px 10px 1px rgba(16, 9, 47, 0.29));
}
.button {
    z-index: 3;
    position: absolute;
    scale: 100%;
    top: 880px;
    left: 50px;
}

.counter {
    width: 600px;
    height: 400px;
    position: absolute;
    left: 960px;
    top: 400px;
    user-select: none;
    z-index: 2;
    filter: drop-shadow(1px 2px 2px rgba(18, 14, 43, 0.57));
}
.counter img {
    width: 100%;
}

.map {
    position: absolute;
    width: 250px;
    height: 300px;
    left: 220px;
    top: 80px;
    filter: drop-shadow(1px 1px 2px rgba(18, 14, 43, 0.57));
}

.map img {
    width: 100%;
}
.map span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
    text-align: center;
}
.map:hover span,
.map:focus span {
    opacity: 1;
}

.plant {
    position: absolute;
    width: 250px;
    height: 300px;
    left: 20px;
    top: 30px;
    filter: drop-shadow(1px 3px 2px rgba(18, 14, 43, 0.57));
}

.plant img {
    width: 80%;
}
.plant span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
    text-align: center;
}
.plant:hover span,
.plant:focus span {
    opacity: 1;
}

.fish-poster {
    position: absolute;
    width: 250px;
    height: 300px;
    left: 500px;
    top: 80px;
    filter: drop-shadow(1px 1px 2px rgba(18, 14, 43, 0.57));
}

.fish-poster img {
    width: 110%;
}
.fish-poster span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 50%;
    left: 20%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
    text-align: center;
}
.fish-poster:hover span,
.fish-poster:focus span {
    opacity: 1;
}

.car-poster {
    position: absolute;
    width: 250px;
    height: 300px;
    left: 750px;
    top: 250px;
    filter: drop-shadow(1px 1px 2px rgba(18, 14, 43, 0.57));
}

.car-poster img {
    width: 80%;
}
.car-poster span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 40%;
    left: 30%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
    text-align: center;
}
.car-poster:hover span,
.car-poster:focus span {
    opacity: 1;
}

.self {
    width: 250px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1150px;
    top: 135px;
    z-index: 1;
    filter: drop-shadow(1px 1px 15px rgba(18, 14, 43, 0.57));
}

.self img {
    width: 105%;
}

.self span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 40%;
    left: 55%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.self:hover span,
.self:focus span {
    opacity: 1;
}

.shelf-left img {
    width: 130%;
}

.poles {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 70px;
    top: 335px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.poles img {
    width: 105%;
}

.poles span {
    opacity: 0;
    position: absolute;
    width: 10px;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.poles:hover span,
.poles:focus span {
    opacity: 1;
}

.nets {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 200px;
    top: 435px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.nets img {
    width: 105%;
}

.nets span {
    opacity: 0;
    position: absolute;
    width: 50px;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.nets:hover span,
.nets:focus span {
    opacity: 1;
}

.lures {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 550px;
    top: 500px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.lures img {
    width: 70%;
}

.lures span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.lures:hover span,
.lures:focus span {
    opacity: 1;
}

.bobbers {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 400px;
    top: 600px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.bobbers img {
    width: 100%;
}

.bobbers span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.bobbers:hover span,
.bobbers:focus span {
    opacity: 1;
}

.line {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 500px;
    top: 700px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.line img {
    width: 80%;
}

.line span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 40%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.line:hover span,
.line:focus span {
    opacity: 1;
}

.shop {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 820px;
    top: 670px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.shop img {
    width: 150%;
}

.shop span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 60%;
    left: 65%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.shop:hover span,
.shop:focus span {
    opacity: 1;
}

.guestbook {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1050px;
    top: 500px;
    z-index: 3;
    filter: drop-shadow(1px 2px 5px rgba(18, 14, 43, 0.57));
}

.guestbook img {
    width: 100%;
}

.guestbook span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.guestbook:hover span,
.guestbook:focus span {
    opacity: 1;
}

.boat {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1250px;
    top: 500px;
    z-index: 3;
    filter: drop-shadow(1px 2px 5px rgba(18, 14, 43, 0.57));
}

.boat img {
    width: 80%;
}

.boat span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.boat:hover span,
.boat:focus span {
    opacity: 1;
}

.notes {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1050px;
    top: 420px;
    z-index: 3;
    filter: drop-shadow(2px 1px 1px rgba(18, 14, 43, 0.57));
}

.notes img {
    width: 80%;
}

.notes span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.notes:hover span,
.notes:focus span {
    opacity: 1;
}

.bowl {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1370px;
    top: 400px;
    z-index: 3;
    filter: drop-shadow(2px 1px 1px rgba(18, 14, 43, 0.57));
}

.bowl img {
    width: 80%;
}

.bowl span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.bowl:hover span,
.bowl:focus span {
    opacity: 1;
}

.fish {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 770px;
    top: 30px;
    z-index: 3;
    filter: drop-shadow(2px 1px 1px rgba(18, 14, 43, 0.57));
}

.fish img {
    width: 150%;
}

.fish span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.fish:hover span,
.fish:focus span {
    opacity: 1;
}

.tv {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1570px;
    top: 30px;
    z-index: 3;
    filter: drop-shadow(2px 3px 1px rgba(18, 14, 43, 0.57));
}

.tv img {
    width: 180%;
}

.tv span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.tv:hover span,
.tv:focus span {
    opacity: 1;
}

.toys {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1570px;
    top: 500px;
    z-index: 3;
    filter: drop-shadow(2px 3px 1px rgba(18, 14, 43, 0.57));
}

.toys img {
    width: 100%;
}

.toys span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 15%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.toys:hover span,
.toys:focus span {
    opacity: 1;
}

.books {
    width: 150px;
    height: auto;
    user-select: none;
    position: absolute;
    left: 1700px;
    top: 660px;
    z-index: 3;
    filter: drop-shadow(1px 2px 1px rgba(18, 14, 43, 0.57));
}

.books img {
    width: 90%;
}

.books span {
    opacity: 0;
    position: absolute;
    width: 20px;
    top: 50%;
    left: 25%;
    transform: translate(-50%, -50%);
    z-index: 99;
    font-size: 40px;
    font-family: Writing;
    line-height: 0.9;
    text-align: center;

    color: #402b2f;
    filter: drop-shadow(1px 1px 0 #f3efcd) drop-shadow(-1px 1px 0 #f3efcd) drop-shadow(1px -1px 0 #f3efcd)
        drop-shadow(-1px -1px 0 #f3efcd);
}
.books:hover span,
.books:focus span {
    opacity: 1;
}

.shelf-left img {
    width: 130%;
}

.shelf-left {
    position: absolute;
    width: 500px;
    height: auto;
    left: 50px;
    top: 320px;
    user-select: none;
    z-index: 2;
    filter: drop-shadow(1px 2px 2px rgba(18, 14, 43, 0.57));
}

.shelf-right img {
    width: 125%;
}

.shelf-right {
    position: absolute;
    width: 300px;
    left: 1500px;
    top: 320px;
    user-select: none;
    z-index: 2;
    filter: drop-shadow(1px 2px 2px rgba(18, 14, 43, 0.57));
}
.flag {
    position: absolute;
    width: 300px;
    left: 1000px;
    top: 50px;
    user-select: none;
    z-index: 0;
}
.flag img {
    width: 170%;
    filter: drop-shadow(1px 1px 2px rgba(18, 14, 43, 0.57));
}

.pumpkin {
    position: absolute;
    width: 200px;
    height: auto;
    left: 1250px;
    top: 700px;
    z-index: 3;
    user-select: none;
    filter: drop-shadow(1px 2px 2px rgba(18, 14, 43, 0.57));
}
.pumpkin img {
    width: 100%;
}

.lights {
    position: absolute;
    width: 1920px;
    height: 20px;
    z-index: 4;
    user-select: none;
}

.lights img {
    width: 100%;
}